<template>
  <div class="app-container">
    <basics-form
      ref="basicsForm"
      :minWidth="'300px'"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="deviceNo" label="设备号"> </el-table-column>
      <el-table-column label="型号">
        <template slot-scope="scope">
          {{ scope.row.type.typeName + `（${scope.row.type.typeGroup}）` }}
        </template>
      </el-table-column>
      <el-table-column prop="productionDate" label="出厂日期">
      </el-table-column>
      <el-table-column prop="deptName" label="所属医院"> </el-table-column>
      <el-table-column prop="b" label="状态">
        <template slot-scope="scope">
          <span :style="{ color: scope.row.isBind ? 'rgb(3, 167, 240)' : '' }">
            {{ scope.row.isBind ? "已绑定" : "未绑定" }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="108px"
        class-name="small-padding fixed-width"
        v-if="roleId != 3"
      >
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isBind"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showDetails(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            v-if="!scope.row.isBind"
            style="margin-left: 10px"
            title="确定删除吗？"
            @confirm="del(scope.row.deviceId)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$refs.basicsForm.formValid()"
    />
    <el-dialog
      :title="item ? '修改' : batch ? '批量导入' : '新增'"
      :visible.sync="openView"
      width="700px"
      append-to-body
    >
      <span
        style="color: rgb(3, 167, 240); cursor: pointer"
        @click="down"
        v-if="batch"
        >点击下载模板</span
      >
      <basics-form
        style="margin-left: 100px"
        ref="basicsAddForm"
        :titleAligin="'right'"
        :titleWidth="'130px'"
        :actionLoading="loading"
        @actionBtnsClick="addAction"
        @submit="addSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import { deviceList, saveDevice, delDevice } from "@/api/manbing/equipment";
import { hospitalAllList } from "@/api/manbing/hospital";
export default {
  name: "list-index",
  components: { BasicsForm },
  props: {
    type: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      roleId: sessionStorage.getItem("roleId"),
      loading: false,
      tableLoading: false,
      openView: false, //新增医院弹出
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      hospitals: null, //所有医院
      item: null, //操作的数据
      batch: false, //批量导入
    };
  },
  created() {},
  watch: {
    type: {
      handler(val) {
        if (this.roleId != 3) {
          this.getHospitals();
        } else {
          this.initRules();
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.tableData=[]
      this.queryParams.pageNum=1
      this.$nextTick(() => {
        this.getList();
      });
    },
    getHospitals() {
      if (this.hospitals) {
        this.initRules();
      } else {
        hospitalAllList({}).then((res) => {
          if (res.code == 200) {
            this.hospitals = res.data;
            this.initRules();
          }
        });
      }
    },
    initRules() {
      let rules = [
        {
          title: "设备号",
          key: "keyWord",
          skip: true,
        },
        {
          title: "型号",
          key: "typeId",
          type: "select",
          selectList: this.type,
          selectKey: "typeId",
          selectShowKey: "typeName",
          skip: true,
        },
        {
          title: "状态",
          key: "isBind",
          type: "select",
          selectList: [
            { name: "已绑定", value: "1" },
            { name: "未绑定", value: "0" },
          ],
          selectKey: "value",
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [{ name: "搜索", value: "primary" }],
          ruleWidth: "auto",
        },
      ];
      if (this.roleId != 3) {
        rules.unshift({
          title: "所属医院",
          key: "deptId",
          type: "select",
          selectList: this.hospitals,
          selectKey: "deptId",
          selectShowKey: "deptName",
          skip: true,
        });
        rules[rules.length - 1].selectList = [
          { name: "搜索", value: "primary" },
          { name: "新增", value: "success" },
          { name: "批量导入", value: "success" },
        ];
      }
      this.$refs.basicsForm.initForm(rules);
    },
    actionBtnsClick(index) {
      if (index == 1) {
        this.item = null;
        this.openView = true;
        this.$nextTick(() => {
          this.initAddRules();
        });
      } else if (index == 2) {
        this.item = null;
        this.openView = true;
        this.$nextTick(() => {
          this.initAddRules(true);
        });
      } else {
        this.queryParams.pageNum = 1;
        this.$refs.basicsForm.formValid();
      }
    },
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      for (let key in param) {
        this.queryParams[key] = param[key];
      }
      this.getList();
    },
    getList() {
      this.loading = true;
      this.tableLoading = true;
      deviceList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    showDetails(item) {
      this.openView = true;
      this.item = item;
      this.$nextTick(() => {
        this.initAddRules();
      });
    },
    //batch 是否批量
    initAddRules(batch) {
      this.batch = batch;
      let item = this.item ? this.item : {},
        typeIdValue = "",
        deptIdValue = "";
      if (item.typeId) {
        this.type.some((it, index) => {
          if (it.typeId == item.typeId) {
            typeIdValue = index;
            return true;
          }
        });
      }
      if (item.deptId) {
        this.hospitals.some((it, index) => {
          if (it.deptId == item.deptId) {
            deptIdValue = index;
            return true;
          }
        });
      }
      let rules = [
        {
          title: "设备号",
          key: "deviceNo",
          hidden: batch,
          value: item.deviceNo || "",
        },
        {
          title: "型号",
          key: "typeId",
          type: "select",
          selectList: this.type,
          selectKey: "typeId",
          selectShowKey: "typeName",
          value: typeIdValue,
        },
        {
          title: "出厂日期",
          key: "productionDate",
          type: "selectDate",
          hidden: batch,
          skip: true,
          value: item.productionDate || "",
        },
        {
          title: "所属医院",
          key: "deptId",
          type: "select",
          selectList: this.hospitals,
          selectKey: "deptId",
          selectShowKey: "deptName",
          value: deptIdValue,
        },
        {
          title: "文件",
          key: "file",
          type: "file",
          hidden: !batch,
          uploadAction:
            process.env.VUE_APP_BASE_API + "/chronicdisease/plat/importDevice",
          submitInUpload: true,
        },
        {
          type: "actionBtns",
          selectList: [
            { name: "取消", value: "" },
            { name: "提交", value: "primary" },
          ],
          btnsAligin: "center",
          ruleWidth: "503px",
        },
      ];
      this.$refs.basicsAddForm.initForm(rules);
    },
    addAction(index) {
      if (index) {
        this.$refs.basicsAddForm.formValid();
      } else {
        this.openView = false;
      }
    },
    addSubmit(param) {
      if (!param) {
        return;
      }
      if (this.batch) {
        this.$modal.msgSuccess("导入成功");
        this.openView = false;
        this.getList();
        return;
      }
      this.loading = true;
      if (this.item) {
        param.deviceId = this.item.deviceId;
      }
      saveDevice(param)
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(this.item ? "修改成功" : "新增成功");
            this.openView = false;
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //删除
    del(deviceId) {
      this.loading = true;
      this.tableLoading = true;
      delDevice({ deviceId })
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    //下载模板
    down() {
      window.open(
        process.env.VUE_APP_BASE_API +
          "/chronicdisease/plat/downloadDeviceTemplate"
      );
    },
  },
};
</script>
<style scoped lang="scss">
</style>

